<template>
<!-- 骨架 -->
  <div style=" margin: 16px 0" v-if="gujia">
    <el-skeleton style="height: 80px;" animated>
      <template #template>
        <div style="padding: 14px; padding: 16px; background-color: #fff;">
          <div
            style="display: flex; align-items: center; justify-items: space-between;"
          >
            <el-skeleton-item variant="image" style="width: 48px; height: 48px; border-radius: 50%;" />
            <div style="width: 50%; margin-left: 15px;">
              <el-skeleton-item variant="text"  />
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
  <!-- 内容 -->
  <div class='my-attention_fans'>
    <div class="my-attention_fans-all" v-for="item in fansListRef" :key="item['id']">
      <div class="left">
        <img :src="item['avatar']" alt="" >
        <div class="text">
          <div class="t1" @click="routerpath(item['id'])"> {{ item['nickname'] }} </div>
          <div class="t2">这里是用户的个性签名</div>
        </div>
      </div>
      <div class="right right-true">
        已关注
      </div>
      <!-- <div class="right right-false">
        关注
      </div> -->
    </div>
  </div>
</template>

<script lang='ts'>
/**
 * 需要的数组类型：
 *    用户的头像
 *    用户的个性签名
 *    用户的关注状态
 */
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getMyFocusAPI, getMyFollowAPI } from '../../api/userAPI'

export default defineComponent({
  name: '',
  props: {
    userID: {
      type: Number
    },
    queryType: {
      type: String
    }
  },
  setup (props: any) {
    const router = useRouter()
    // 骨架
    const gujia = ref<boolean>(true)
    // 获取用户id
    const userId = props.userID
    // 根据type请求不同的关注和粉丝的数据
      // 粉丝请求
    const fansListRef = ref([])
    const AFListRef = ref<object[]>([])
    const getFansList = async (): Promise<void> => {
      const res = await getMyFollowAPI(userId)
      console.log(res.data);
      
      if(res.data.code === 200) gujia.value = false
      fansListRef.value = res.data.data
    }
      // 关注请求
    const getAttentionList = async(): Promise<void> => {
      const res = await getMyFocusAPI(userId)
      if(res.data.code === 200) gujia.value = false
      fansListRef.value = res.data.data
    }

    // 请求的获取
    const useApi = (typeValue: any) => {      
      switch (typeValue) {
        case 'fans':
          getAttentionList()
          break
        case 'attention':
          
          getFansList()
          break
        default:
          break
      }
    }
    watch(() => props.queryType, () => {
      gujia.value = true
      useApi(props.queryType)
    })
    const routerpath = (userID: number) => {
      let { href } = router.resolve({
        name: 'my',
        query: {
          userID,
          type: 'blog'
        }
      })
      window.open(href, '_blank')
    }

    // 生命周期大全
    onMounted(() => {
      console.log(props.queryType);
      
      useApi(props.queryType)
    })
    return {
      AFListRef,
      fansListRef,
      gujia,
      routerpath
    }
  }
})
</script>

<style lang='scss' scoped>
.my-attention_fans{
  margin: 16px 0;
}

.my-attention_fans-all{
  background-color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left{
    display: flex;
    align-items: center;
    img{
      width: 48px;
      height: 48px;
      margin-right: 9px;
      border: 1px solid #e8e8ed;
      border-radius: 50%;
    }
    .text{
      .t1{
        color: #222226;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        cursor: pointer;
      }
      .t2{
        margin-top: 5px;
        font-size: 14px;
        color: #555666;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }

  .right-true{
    width: 96px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #555666;
    color: #555666;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }

  .right-false{
    width: 96px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #fc5531;
    background: #fff;
    color: #fc5531;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }
}
</style>
